@import '~ng-devui/styles-var/devui-var.scss';

.header-menu {
    display: flex;
    align-items: center;

    .menu-item {
        margin: 12px;
        font-size: $devui-font-size-page-title;
        .menu-link {
            color: $devui-text;
            cursor: pointer;
            &:hover {
                color: $devui-list-item-hover-text;
            }

            .devui-header-open-icon {
              display: inline-block;
              text-indent: 0;
              pointer-events: none; /* 让鼠标穿透 */
              width: 16px;
              height: 16px;
              line-height: 16px;
              transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
              transform-origin: center;
              vertical-align: text-top;

              & > svg {
                width: 16px;
                height: 16px;
          
                polygon {
                  fill: $devui-text-weak;
                }
              }
            }

            &:not(.devui-dropdown-open) {
              .devui-header-open-icon {
                transform: rotate(-180deg);
              }
            }
        }
    }

    .menu-selected-item {
        margin: 12px;
        font-weight: 600;
        .menu-link {
            color: $devui-brand;
        }
    }
}

.menu-list-wrapper {
    display: flex !important;
    padding: 12px 12px;

    .menu-list {
        .menu-list-title,
        .menu-sublist-item {
            height: 36px;
            line-height: 36px;
            padding: 0 10px;
        }

        .menu-list-title {
            font-size: $devui-font-size-card-title;
            font-weight: $devui-font-title-weight;
        }

        .menu-sublist-item {
            font-size: $devui-font-size;
        }

        .menu-sublist {
            .menu-sublist-item {
                a {
                    color: $devui-text;
                    transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
                    &:hover {
                        color: $devui-list-item-hover-text;
                    }
                }
            }
        }
    }
}

@media (max-width: 1360px) {
    .header-menu {
        flex-direction: column;
    }
}